<template>
	<div class="page_root" id="root_index">
		<div class="warp">
			<div class="container-fluid">
				<el-row>
					<el-col :span="4">
						<mm_label bg_color="bg_purple" icon="el-icon-user-solid" :url="url_user_count" unit="人" title="用户数量">
						</mm_label>
					</el-col>
				</el-row>

				<!-- 添加表格 -->
				<el-row>
					<el-col :span="24">
						<!-- 添加 header-align="center" 属性 -->
						<el-table :data="list" style="width: 100%" header-align="center">
							<!-- ... existing code ... -->
							<el-table-column prop="average_score" label="平均分数">
								<template #default="scope">
									{{ scope.row.average_score.toFixed(2) }}
								</template>
							</el-table-column>
							<!-- ... existing code ... -->
							<el-table-column prop="college_name" label="学院名称" align="center"></el-table-column>
							<el-table-column prop="number_of_participants" label="参与人数" align="center"></el-table-column>
							<el-table-column prop="event_name" label="赛事名称" align="center"></el-table-column>
							<el-table-column prop="total_score" label="总分数" align="center"></el-table-column>
							<el-table-column prop="lowest_score" label="最低分数" align="center"></el-table-column>
							<el-table-column prop="highest_score" label="最高分数" align="center"></el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>
<script>
import mixin from "@/mixins/page.js";
import pieChart from "@/components/charts/pie_chart";
import barChart from "@/components/charts/bar_chart";
import newBarChart from "@/components/charts/new_bar_chart";
import lineChart from "@/components/charts/line_chart";
import newLineChart from "@/components/charts/new_line_chart";
import mm_label from "@/components/mm_label.vue";
import axios from 'axios';

export default {
	mixins: [mixin],
	name: "Home",
	components: {
		pieChart,
		barChart,
		newBarChart,
		lineChart,
		newLineChart,
		mm_label
	},
	data() {
		return {
			isAdmin: false,
			recognitionType: "",
			activeName: "third",
			url_user_count: "~/api/user/count?",
			list: []
		};
	},
	created() {
		this.getUserInfo();
		this.get_score();
	},
	mounted() { },
	methods: {
		//获取院系总分数
		async get_score() {
			await this.$get(
				"~/api/college_competition_score/get_list?like=0",
				null,
				(json) => {
					console.log(json);
					if (json.result) {
						this.list = json.result.list;
					}
				});
		},
		async get_nickname(list, flag) {
			if (flag) {
				for (let i = 0; i < list.length; i++) {
					await this.$get(
						"~/api/user/get_obj?user_id=" + list[i],
						null,
						(json) => {
							if (json.result) {
								list[i] = json.result.obj.nickname;
							}
						});
				}
			} else {
				for (let i = 0; i < list.length; i++) {
					await this.$get(
						"~/api/user/get_obj?user_id=" + list[i].name,
						null,
						(json) => {
							if (json.result) {
								list[i].name = json.result.obj.nickname;
							}
						});
				}
			}
		},
		getUserInfo() {
			let userGroup = window.localStorage.getItem('user_group');
			if (userGroup) {
				let _userGroup = JSON.parse(userGroup);
				let _info = JSON.parse(_userGroup.value);
				this.isAdmin = _info["user_group"] == "管理员" ? true : false;
			}
		},
		// 时间格式化方法
		formatTime(timestamp) {
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			const seconds = String(date.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		}
	},
	computed: {
		recognitionHeight() {
			if (this.recognitionType === "face") {
				return "1070px"
			} else {
				return "1180px"
			}
		},
		recognitionUrl() {
			if (this.recognitionType === "face") {
				return "https://www.sk-ai.com/Experience/face-compare"
			} else {
				return "https://www.sk-ai.com/Experience/recognition?type="
			}
		}
	}
};
</script>

<style scoped="scoped">
.chart {
	display: block;
	width: 100%;
	height: 400px;
	padding: 1rem;
	position: relative;
}

.el-col {
	padding: 0.5rem;
}

.card {
	overflow: hidden;
}

.iframe_box,
.iframe_box_change {
	width: 100%;
	height: 1180px;
	position: relative;
	margin-top: 25px;
}

.iframe_box_change {
	height: 580px;
	padding-top: 50px;
}

.iframe_box .iframe_box_content,
.iframe_box_change .iframe_box_content {
	width: 100%;
	height: 100%;
}

.iframe_box_top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	font-size: 25px;
	line-height: 100px;
	background: #fff;
	z-index: 99999999;
	padding-left: 50px;
}
</style>